import 'package:flutter/material.dart';
import 'package:hello/common/common_ui.dart';
import 'package:hello/enums/ExitStyle.dart';
import 'events/theme_event.dart';
import 'items/main_item.dart';
import 'common/app_color_size.dart';

/* 组件 */
class ComponentsPage extends StatefulWidget {
  @override
  _ComponentsPageState createState() => _ComponentsPageState();
}

class _ComponentsPageState extends State<ComponentsPage> {
  bool _isDark = false;

  @override
  void initState() {
    super.initState();
    _setTheme();
  }

  void _setTheme() async {
    bool isDark = await getCacheTheme();
    setState(() {
      _isDark = isDark;
    });
  }

  @override
  Widget build(BuildContext context) {
    Map<String, String> dataTableMap = new Map();
    dataTableMap.putIfAbsent('datatable_demo', () => '普通数据表');
    dataTableMap.putIfAbsent('datatable_select', () => '选择数据表');
    dataTableMap.putIfAbsent('datatable_sort', () => '排序数据表');
    dataTableMap.putIfAbsent('datatable_paginated', () => '分页数据表');
    return new WillPopScope(
        onWillPop: (){
          // 与WillPopScope配合监听返回按钮
          return exitApp(context, ExitStyle.showDialog);
        },
        child: Scaffold(
          // backgroundColor: appPageBgColor,
          appBar: AppBar(
            title: Center(
              child: Text('组件'),
            ),
            elevation: 0.0,
          ),
          drawer: Drawer(
            child: ListView(
              padding: EdgeInsets.zero,
              children:  <Widget>[
                DrawerHeader(
                  decoration: BoxDecoration(
                    color: _isDark ? appDarkPrimaryColor : appPrimaryColor,
                  ),
                  child: Text(
                    'Drawer Header',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                    ),
                  ),
                ),
                ListTile(
                  leading: Icon(Icons.message),
                  title: Text('Messages'),
                ),
                ListTile(
                  leading: Icon(Icons.account_circle),
                  title: Text('Profile'),
                ),
                ListTile(
                  leading: Icon(Icons.settings),
                  title: Text('Settings'),
                ),
                SwitchListTile(
                  title: Text("夜间模式"),
                  value: _isDark,
                  secondary: Icon(Icons.toys),
                  onChanged: (bool val) {
                    setState(() {
                      _isDark = val;
                      //发送订阅消息去修改主题
                      eventBus.fire(ThemeEvent(val));
                    });
                  },
                )
              ],
            ),
          ),
          body: Container(
            margin: EdgeInsets.all(0.0),
            child: ListView(
              padding: new EdgeInsets.all(2.0),
              children: <Widget>[
                MainItem(
                    text: '数据表DataTable',
                    routeName: 'datatable_paginated',
                    iconData: Icons.flip,
                    trailingIconData: Icons.more_vert,
                    trailingMap: dataTableMap,
                    isDone: true),
                MainItem(
                    text: '文本与字体',
                    routeName: 'font_text_style',
                    iconData: Icons.flip),
                MainItem(
                    text: '按钮',
                    routeName: 'button',
                    iconData: Icons.flip,
                    isDone: true),
                MainItem(
                    text: '图片和icon', routeName: 'image_icon', iconData: Icons.flip),
                MainItem(
                    text: '单选框和复选框',
                    routeName: 'radio_checkbox',
                    iconData: Icons.flip),
                MainItem(text: '输入框和表单', routeName: '', iconData: Icons.flip),
                MainItem(text: '进度指示器', routeName: '', iconData: Icons.flip),
                MainItem(text: '抽屉Drawer', routeName: '', iconData: Icons.flip),
                MainItem(text: '标签卡Tab', routeName: '', iconData: Icons.flip),
                MainItem(text: '卡片Card', routeName: '', iconData: Icons.flip),
                MainItem(
                    text: '对话框Dialog', routeName: 'dialog', iconData: Icons.flip),
                MainItem(text: '目录Menus', routeName: '', iconData: Icons.flip),
                MainItem(text: '日期选择器', routeName: '', iconData: Icons.flip),
                MainItem(text: '图片选择器', routeName: '', iconData: Icons.flip),
                MainItem(text: '文件选择器', routeName: '', iconData: Icons.flip),
                MainItem(text: '多选单选控制器', routeName: '', iconData: Icons.flip),
                MainItem(text: '步骤指示器Stepper', routeName: '', iconData: Icons.flip),
                MainItem(text: '视差滚动', routeName: 'paralle', iconData: Icons.flip),
                MainItem(
                    text: '滚动通知',
                    routeName: 'scroll_notification',
                    iconData: Icons.flip),
                MainItem(
                    text: '滚动控制',
                    routeName: 'scroll_controller',
                    iconData: Icons.flip),
              ],
            ),
          ),
        ));
  
  }
}
